<template>
  <div class="about">
    <!-- 优惠券登录前 -->
    <div class="coupon" v-if="this.ustoken == false">
      <div class="left" v-for="(v, iu) in thipric" :key="iu">
        <div class="different" style="background: red">
          ￥<span>{{ v.coupon_price }}</span>
          <p>满{{ v.use_min_price }}元可用</p>
        </div>
        <div class="Differents" style="background: red">
          <div class="top"><button>通用卷</button>{{ v.coupon_title }}</div>
          <hr />
          <div class="bottom">
            <ul>
              <li>{{ v.end_time }}</li>
              <li><button @click="coupon">立即领取</button></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 优惠券登录后 -->
    <div class="coupon" v-else>
      <div class="left" v-for="(v, iu) in thipric" :key="iu">
        <div class="different" style="background: #ccc">
          ￥<span>{{ v.coupon_price }}</span>
          <p>满{{ v.use_min_price }}元可用</p>
        </div>
        <div class="Differents" style="background: white">
          <div class="top"><button>通用卷</button>{{ v.coupon_title }}</div>
          <hr />
          <div class="Abottom">
            <ul>
              <li>{{ v.end_time }}</li>
              <li class="one"></li>
              <li><button>已领取</button></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getprice } from "@/api/request";
export default {
  data() {
    return {
      ustoken: true,
      thipric: [],
    };
  },
  created() {
    // 获取token
    let token = localStorage.getItem("token");
    // 判断有没有token
    if (token) {
      this.ustoken = true;
    } else {
      this.ustoken = false;
    }
    // 获取优惠券
    getprice().then((res) => {
      this.thipric = res.data.data;
      console.log(this.thipric);
    });
  },
  methods: {
    coupon() {
      this.$router.push("/my");
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  //   padding: 0;
  box-sizing: border-box;
}
// 优惠券
// 优惠券
.coupon {
  width: 84%;
  margin-left: 8%;
  margin-top: 15%;
  line-height: 40px;
  hr {
    margin-top: 1%;
    background: white;
  }
  .left {
    display: flex;
    margin-top: 3%;
    .different {
      color: white;
      border-radius: 10px 0px 0px 10px;
      border-right: dashed;
    }

    .Differents {
      color: #ccc;
      border-radius: 0px 10px 10px 0px;
      flex: 1;
      .top {
        margin-left: 2%;
        button {
          width: 35%;
          border: none;
          height: 30px;
          line-height: 30px;
          border-radius: 25px;
        }
      }

      .Abottom {
        button {
          width: 100%;
          border: none;
          height: 30px;
          line-height: 30px;
          border-radius: 25px;
        }
        ul {
          display: flex;
          margin-left: 2%;
          li {
            flex: 1;
            margin-right: 2%;
          }
        }
      }
    }
  }
}
</style>